<template>
  <div class="login-container">
    
    <h1 style="color: red; position: absolute; top: 0; ">
        <span style="font-size: 30px; letter-spacing:0.2em; font-style: oblique;">酆</span>
        <span style="color: orange; font-size: 20px; letter-spacing:0.2em">都</span>
        <span style="font-size: 60px; letter-spacing:0.2em; font-style: italic;">鬼</span>
        <span style="color: purple">域</span>
    </h1>

    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="top">
      <el-form-item label="鬼名" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>

      <el-form-item label="口令" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login">下地府</el-button>
      </el-form-item>

    </el-form>
  </div>

</template>

<script>
export default {
  name: 'LoginView',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入鬼名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入口令', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 登录逻辑，可以发送请求到后端进行验证
          console.log('登录成功');
          // 登录成功后跳转到首页
          this.$router.push('/home');
        } else {
          console.log('表单验证失败');
        }
      });
    }
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
   background-color: #000000;
   /* background: linear-gradient(#000000, #808080); */
   /* background: radial-gradient(#000000, #808080); */



}
</style>